<template>
  <div class="email-component">
    <div :class="{ 'left-email-data': true, collapse: emailDataCollapse }">
      <div class="search-input">
        <a-input v-model:value="searchInput" placeholder="搜索邮件" />
        <b-icon v-show="searchInput.length === 0" type="search"></b-icon>
      </div>
      <div class="write-button-wrapper">
        <a-button
          type="primary"
          size="large"
          class="write-email-button"
          @click="writeEmail"
        >
          <template #icon>
            <b-icon type="write"></b-icon>
          </template>
          写信
        </a-button>
      </div>
      <div class="email-account">
        <div
          v-for="account in emailData"
          :key="account.id"
          class="account-item"
        >
          <div @click="collapse(account)" :class="emailActiveClass(account)">
            <down-outlined v-if="account.collapse.value" class="collapse-btn" />
            <up-outlined class="collapse-btn" v-else />
            <span class="account-email">
              <span class="email-suffix-icon">B</span>
              <span class="account-email-span">{{ account.email }}</span></span
            >
          </div>
          <transition>
            <ul v-show="account.collapse.value">
              <li
                v-for="data in typeList"
                :key="data.type"
                :class="computedActiveClass(account.email, data.type)"
                @click="typeClickEvent(account.email, data.type)"
              >
                <b-icon :type="data.icon" />
                <span class="email-type-label">{{ data.label }}</span>
              </li>
            </ul>
          </transition>
        </div>
      </div>
      <div class="email-account-collapse" @click="leftEmailDataCollapse">
        <menu-unfold-outlined />
      </div>
    </div>
    <div :class="{ 'email-list': true, collapse: emailListCollapse }">
      <div class="email-list-top">
        <a-dropdown :trigger="['click']">
          <span class="email-list-filter-action">筛选</span>
          <template #overlay>
            <a-menu v-model:selectedKeys="filterMenuKeys" @click="filterMenuClick" class="filter-menu" style="width: 120px;">
              <a-menu-item key="0">
                全部
              </a-menu-item>
              <a-menu-item key="1">
                已加密
              </a-menu-item>
              <a-menu-item key="2">
                未读
              </a-menu-item>
              <a-menu-divider />
              <a-sub-menu key="sub" @click="filterSortClick">
                <template #title>排序</template>
                <a-menu-item key="sub-1">按时间从新到旧</a-menu-item>
                <a-menu-item key="sub-2">按时间从旧到新</a-menu-item>
              </a-sub-menu>
            </a-menu>
          </template>
        </a-dropdown>
        <span class="email-list-collapse" @click="emailListCollapseFn">
          <menu-unfold-outlined />
        </span>
      </div>
      <div class="email-summary-list">
        <list-item
          v-for="index in 100"
          :key="index"
          :info="{ isRead: index === 1, id: `${index}` }"
          :current-id="currentViewEmailData.id"
          @click="viewEmail({ isRead: index === 1, id: `${index}` })"
        />
      </div>
    </div>
    <div v-if="!currentViewEmailData.id" class="email-empty">
      <img src="../assets/email-empty.svg" alt="未选择邮件" />
    </div>
    <div v-else class="email-content-wrapper">
      <div class="email-action">
        <span class="email-action-item"><b-icon type="reply"/> 回复</span>
        <span class="email-action-item"><b-icon type="reply-all"/> 回复全部</span>
        <span class="email-action-item"><b-icon type="forward"/>转发</span>
        <span class="email-action-item"><b-icon type="delbox"/>删除</span>
      </div>
      <div class="email-send-receive-data">
        <div class="email-title"><b-icon type="collect"></b-icon> Hello World</div>
        <div class="email-sender-data">
          <div class="sender-info singe-line">
            <span class="high">1299563700@qq.com</span> 发给 yangguipeng@df-emall.com
          </div>
          <div class="send-date">
            <span class="send-time">2022/10/26 17:28:33</span>
            <span class="email-send-detail-visible" @click="emailDetailVisibleHandler">
              {{ emailDetailVisible ? '隐藏' : '显示' }}信息
            </span>
          </div>
        </div>
        <div class="email-lock">
          <b-icon type="lock"></b-icon> 邮件内容已加密(RSA)
        </div>
        <Transition>
          <ul v-show="emailDetailVisible" class="email-sender-detail-data">
            <li>
              <span>发件人：</span>
              <div><span>李工</span> xudong@bohan-it.com</div>
            </li>
            <li>
              <span>收件人：</span>
              <div><span>李工</span> xudong@bohan-it.com</div>
            </li>
            <li>
              <span>抄送：</span>
              <div><span>李工</span> xudong@bohan-it.com</div>
            </li>
            <li>
              <span>时间：</span>
              <div><span>李工</span> xudong@bohan-it.com</div>
            </li>
            <li>
              <span>大小：</span>
              <div><span>李工</span> xudong@bohan-it.com</div>
            </li>
          </ul>
        </Transition>
      </div>
      <div class="email-content">
        Hello World <br>
        Hello World <br>
        Hello World <br>
        Hello World <br>
        Hello World <br>
        Hello World <br>
        Hello World <br>
        Hello World <br>
        Hello World <br>
        Hello World <br>
        Hello World <br>
        Hello World <br>
        Hello World <br>
        Hello World <br>
        Hello World <br>
        Hello World <br>
        Hello World <br>
        Hello World <br>
        Hello World <br>
        Hello World <br>
        Hello World <br>
        Hello World <br>
        Hello World <br>
        Hello World <br>
        Hello World <br>
        Hello World <br>
        Hello World <br>
        Hello World <br>
        Hello World <br>
        Hello World <br>
        Hello World <br>
        Hello World <br>
        Hello World <br>
        Hello World <br>
        Hello World <br>
        Hello World <br>
        Hello World <br>
        Hello World <br>
        Hello World <br>
        Hello World <br>
        Hello World <br>
        Hello World <br>
        Hello World <br>
        Hello World <br>
        Hello World <br>
        Hello World <br>
        Hello World <br>
        Hello World <br>
        Hello World <br>
        Hello World <br>
        Hello World <br>
        Hello World <br>
        Hello World <br>
        Hello World <br>
        Hello World <br>
        Hello World <br>
        Hello World <br>
        Hello World <br>

      </div>
      <div class="email-bottom-action">
        <div>
          <span class="email-action-item"><b-icon type="reply"></b-icon>回复</span>
          <span class="email-action-item"><b-icon type="forward"></b-icon>转发</span>
          <span class="email-action-item"><b-icon type="delbox"></b-icon>删除</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  DownOutlined,
  UpOutlined,
  MenuUnfoldOutlined,
} from "@ant-design/icons-vue";
import { accountData } from "../mock";
import { ref } from "vue";
import ListItem from "./components/EmailListItem.vue";
import { useRouter } from 'vue-router'

const emailData = accountData.map((item, index) => ({
  ...item,
  collapse: ref(index === 0),
}));
const emailDataCollapse = ref(false);
const emailListCollapse = ref(false);
const emailDetailVisible = ref(true)
const router = useRouter()
const searchInput = ref('')

const typeList = [
  { type: 1, label: "收件箱", icon: "inbox" },
  { type: 2, label: "草稿箱", icon: "draft" },
  { type: 3, label: "已发送", icon: "sended" },
  { type: 4, label: "已删除", icon: "delbox" },
];

const currentViewEmailData = ref({});
const filterMenuKeys = ref(['0']) // 筛选菜单选中的项

const currentData = ref({
  email: accountData[0].email,
  type: 1,
});

// 写邮件点击事件
function writeEmail() {
  router.push({
    path: '/mail/write',
    query: {
      type: 'create'
    }
  })
}
// 邮箱类型选择点击事件
function typeClickEvent(email, type) {
  currentData.value["email"] = email;
  currentData.value["type"] = type;
  viewEmail({});
}
// 高亮当前选中的邮箱查看类型
function computedActiveClass(email, type) {
  return currentData.value["email"] === email &&
    currentData.value["type"] == type
    ? "active"
    : "";
}

// 邮箱对应的已收 、 已发、草稿箱列表折叠方法
function collapse(account) {
  account.collapse.value = !account.collapse.value;
}

// 当前高亮的邮箱
function emailActiveClass({ email }) {
  return currentData.value["email"] === email
    ? "email-active email-account-data"
    : "email-account-data";
}

// 用户邮箱列表折叠
function leftEmailDataCollapse() {
  emailDataCollapse.value = !emailDataCollapse.value;
}

// 邮件列表折叠
function emailListCollapseFn() {
  emailListCollapse.value = !emailListCollapse.value;
}

// 点击列表某项 查看邮件具体内容
function viewEmail(data) {
  currentViewEmailData.value = data;
}
// 隐藏/显示 右侧邮件内容 - 具体详情
function emailDetailVisibleHandler() {
  emailDetailVisible.value = !emailDetailVisible.value
}
// 筛选菜单 点击事件
function filterMenuClick({ key, keyPath }) {
  if (keyPath.length === 1) {
    filterMenuKeys.value = key
  }
  // 子菜单 排序
  if (keyPath.length === 2) {
    console.log(key)
  }
}

</script>

<style lang="less" scoped>
.email-component {
  display: flex;
  height: 100%;
  .left-email-data {
    background: #fff;
    width: 220px;
    flex-shrink: 0;
    height: 100%;
    position: relative;
    padding-bottom: 40px;
    .write-button-wrapper {
      text-align: center;
      margin-bottom: 15px;
      padding: 0 8px;
    }
    .search-input {
      padding: 11px 8px;
      position: relative;
      .ant-input {
        background: #eff2f5;
        border-radius: 16px;
        text-align: center;
      }
      &>.anticon{
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        left: 50%;
        margin-left: -37px;
        color: #aaa;
      }
    }
    .email-suffix-icon {
      display: inline-block;
      width: 16px;
      height: 16px;
      text-align: center;
      line-height: 16px;
      font-size: 12px;
      font-weight: 900;
      color: #fff;
      background: #00a18d;
      border-radius: 3px;
      margin-right: 5px;
    }
    .email-account-collapse {
      position: absolute;
      bottom: 0;
      left: 0;
      width: calc(100% - 16px);
      height: 36px;
      display: flex;
      align-items: center;
      border-top: 1px solid #eeeeee;
      margin: 0 8px;
      cursor: pointer;
      .anticon {
        transform: rotate(180deg);
        font-size: 18px;
      }
      &:hover {
        color: @primary-color;
        background: @hover-color;
      }
    }
    &.collapse {
      width: 48px;
      overflow: hidden;
      .email-account-collapse {
        justify-content: center;
        .anticon {
          transform: rotate(0deg);
        }
      }
      .email-type-label {
        opacity: 0;
        display: none;
      }
      .email-account ul li {
        padding-left: 18px;
      }
      .email-account-data {
        .anticon {
          display: none;
        }
        .account-email-span {
          display: none;
        }
      }
      .account-item > div {
        padding-left: 18px;
      }
      .write-button-wrapper {
        display: none;
      }
      .search-input .ant-input {
        padding: 4px 8px;
      }
    }
  }
  .email-list {
    background: #ffffff;
    width: 320px;
    flex-shrink: 0;
    border-right: 1px solid @border-color-base;
    margin: auto 0 auto 8px;
    height: 100%;
    &.collapse {
      width: 48px;
      .email-summary-list {
        display: none;
      }
      .email-list-filter-action {
        display: none;
      }
      .email-list-collapse {
        width: 100%;
        right: 0;
        text-align: center;
        .anticon {
          transform: rotate(0);
        }
      }
      .email-list-top {
        border-bottom: none;
      }
    }
  }
}
.write-email-button {
  height: 36px;
  background: #ffffff;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  width: 100%;
  color: @primary-color;
  border: none;
  line-height: 22px;
  &:hover {
    background: @hover-color;
  }
  .anticon{
    font-size: 20px;
    transform: translateY(1px);
    color: inherit;
  }
}
.account-item {
  margin-bottom: 15px;
}
.account-item > div {
  height: 40px;
  line-height: 40px;
  padding-left: 28px;
  cursor: pointer;
  color: rgba(23, 26, 29, 0.6);
  position: relative;
  .collapse-btn {
    font-size: 12px;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
  &:hover {
    background-color: @hover-color;
    border-radius: 8px;
  }
  &.email-active {
    color: @primary-color;
    font-weight: bold;
  }
}
.email-account ul li {
  height: 36px;
  line-height: 36px;
  padding-left: 48px;
  cursor: pointer;
  &.active {
    background-color: @hover-color;
    color: #018d8e;
    .bh-icon {
      color: @primary-color;
    }
  }
  &:hover {
    background-color: @hover-color;
  }
  .account-email {
    font-size: 12px;
    font-weight: bolder;
  }
  .anticon{
    margin-right: 5px;
  }
}

.email-summary-list {
  overflow-y: auto;
  max-height: calc(100% - 43px);
  padding-bottom: 10px;
}
.email-list-top {
  height: 43px;
  line-height: 43px;
  border-bottom: 1px solid @border-color-base;
  position: relative;
  padding: 0 18px;
  position: relative;
  .email-list-collapse {
    position: absolute;
    top: 50%;
    right: 8px;
    padding: 0 10px;
    transform: translateY(-50%);
    .anticon {
      transform: rotate(180deg);
    }
    &:hover {
      color: @primary-color;
      background: @hover-color;
      cursor: pointer;
    }
  }
}

.email-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.email-content-wrapper{
  flex-grow: 1;
  padding: 0 8px 8px;
  display: flex;
  flex-direction: column;
  .email-action{
    padding: 14px 16px 12px;
    .email-action-item{
      display: inline-flex;
      align-items: center;
      margin-right: 24px;
      cursor: pointer;
      &:hover{
        color: @primary-color;
      }
    }
    .anticon{
      font-size: 18px;
      color: inherit;
      margin-right: 3px;
    }
  }
  .email-send-receive-data{
    background: #ffffff;
    padding: 0 16px;
  }
  .email-title{
    font-size: 18px;
    font-weight: 600;
    padding-bottom: 6px;
    padding-top: 14px;
    .anticon{
      color: #CCCCCC;
      font-size: 14px;
      vertical-align: unset;
    }
  }
  .email-sender-data{
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #666666;
    padding-bottom: 14px;
    border-bottom: 1px dashed #cccccc;
    .high{
      color: #333333;
      font-weight: 600;
    }
    .sender-info{
      flex-grow: 1;
      padding-right: 20px;
    }
    .send-date{
      flex-shrink: 0;
    }
    .email-send-detail-visible{
      color: #4d9af5;
      margin-left: 16px;
      cursor: pointer;
      &:hover{
        color: #024ea7;
      }
    }
  }
  .email-lock{
    color: @primary-color;
    padding: 7px 0;
    border-bottom: 1px dashed #cccccc;
    .anticon{
      color: inherit;
    }
  }
  .email-sender-detail-data{
    border-bottom: 1px dashed #cccccc;
    height: 143px;
    li{
      display: flex;
      margin-bottom: 3px;
      &:last-child{
        margin-bottom: 16px;
      }
      &:first-child{
        margin-top: 8px;
      }
      &>span{
        width: 60px;
        display: inline-block;
        text-align: right;
        color: #666666;
      }
    }
  }
  .email-content{
    background: #ffffff;
    padding: 12px 16px;
    flex-grow: 1;
    overflow: auto;
  }
  .email-bottom-action{
    background: #ffffff;
    padding: 0 16px;
    &>div{
      height: 62px;
      display: flex;
      align-items: center;
      border-top:1px dashed #cccccc ;
    }
    .email-action-item{
      height: 32px;
      padding: 0 16px;
      border-radius: 23px;
      border: 1px solid #333333;
      display: inline-flex;
      align-items: center;
      margin-right: 10px;
      .anticon{
        font-size: 18px;
        color: inherit;
      }
      &:hover{
        background: @primary-color;
        border-color: @primary-color;
        color: #ffffff;
        cursor: pointer;
      }
    }
  }
  .v-enter-active,
  .v-leave-active {
    transition: height 0.35s;
  }

  .v-enter-from,
  .v-leave-to {
    height: 0;
  }
}

.filter-menu{
  width: 120px;
  :deep(.ant-dropdown-menu-item-selected, .ant-dropdown-menu-submenu-title-selected) {
    color: #333;
    background: #F1F9F9;
    position: relative;
    &:before{
      content: '';
      display: inline-block;
      width: 4px;
      height: 4px;
      background: #009E98;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      transform: translate(-2px, -2px);
      left: 16px;
    }
  }
  :deep(.ant-dropdown-menu-item, .ant-dropdown-menu-submenu-title) {
    padding: 5px 24px;
  }
  :deep(.ant-dropdown-menu-submenu-title) {
    padding-left: 24px;
  }
}
</style>
